<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../libs/vue.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: darkcyan;
            color: #dfdfdf;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2> {{title }} </h2>
        <h2>msg == {{msg }}</h2>
        <m-head></m-head>

        <parent></parent>
    </div>
    <template id="parent">
        <div>
            <h2 ref="one">parent - parent - 父组件</h2>
            <p>
                <input type="text" v-model="msg">
            </p>
            <button @click="count++">点击修改myCount </button>
            <button @click="show=!show">点击切换组件的显示和隐藏</button>
            <button @click="changechild">refs 去操作子组件 </button>
            <hr>
            <child :msg="msg" :my-count="count" :show="show" ref="child"></child>
        </div>
    </template>
    <template id="child">
        <div>
            <h2> child - child - 1 - 子组件 </h2>
            <h2>msg -- {{msg }}</h2>
            <h2> myCount === {{myCount}}</h2>
            <h2>num --- {{num}}</h2>
            <p class="box" v-show="show">
                我是被父组件控制的
            </p>
        </div>
    </template>
    <script>
        // 全局注册
        Vue.component("mHead", {
            template: "<header>Head - Head - wh2116daydayup </header>"
        })

        Vue.component("parent", {
            template: "#parent",
            data() {
                return {
                    msg: "Are you OK",
                    count: 1000,
                    show: true
                }
            },
            methods: {
                changechild() {
                    // this.$refs.child == 子组件 this 
                    this.$refs.child.num++;
                    this.$refs.child.todochange()
                }
            },
            mounted() {
                this.$refs.one.style.color = 'red'
                console.log(this.$refs)
            }
        })

        Vue.component("child", {
            template: "#child",
            data() {
                return {
                    num: 2116
                }
            },
            methods: {
                todochange() {
                    console.log('这是子组件的一个函数 - todochange ')
                }
            },
            props: {
                msg: String, // this.msg 
                myCount: Number,
                show: [String, Boolean]
            }
        })


        const vm = new Vue({
            // el:"#app",
            components: {
            },
            data: {
                title: "Vue 组件通信 (父改子) ",
                msg: "小型、独立和通常可复用的组件构建大型应用"
            },
            mounted() {
                document.getElementsByTagName('title')[0].innerHTML = this.title
            }
        }).$mount("#app")
    </script>

    <!-- 
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        
        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）
        a. props  必须动态props 父组件修改自身的变量  把变化的值传入 子组件  子组件接收动态props 
        b. refs   指向这个子组件对象    
        c. 事件总线 (bus new Vue)
        d. events 事件   (emit on )
        e. vuex (最后一天) 

        2. 子组件访问父组件
        
        3. 兄弟组件之间的通信


        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数 
    -->
</body>

</html>